<template>
  <div class="statistics" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="配送统计" background-color="#262A36"></myHead>
    <div class="time">
      <span>自定义查看</span>
      <div @click="show = true">
        <span>{{start}}</span>
        <span>至</span>
        <span>{{end}}</span>
      </div>
      <span class="search">查询</span>
<!--      <van-cell title="选择日期区间" :value="date" @click="show = true" />-->
    </div>
    <div class="income">
      <div class="left">
        <div class="money">￥199</div>
        <div class="desc">今日收入</div>
      </div>
      <div class="right">
        <div class="money">199</div>
        <div class="desc">配送数量</div>
      </div>
    </div>
    <div class="income">
      <div class="left">
        <div class="money">￥199</div>
        <div class="desc">近7日收入</div>
      </div>
      <div class="right">
        <div class="money">199</div>
        <div class="desc">配送数量</div>
      </div>
    </div>
    <div class="income">
      <div class="left">
        <div class="money">￥199</div>
        <div class="desc">近30日收入</div>
      </div>
      <div class="right">
        <div class="money">199</div>
        <div class="desc">配送数量</div>
      </div>
    </div>
    <van-calendar v-model="show" :min-date="minDate" type="range" @confirm="onConfirm" />
  </div>
</template>

<script>
  import myHead from "../../components/SendComponents/lib/myHead";
  import Vue from 'vue';
  import { Calendar } from 'vant';

  Vue.use(Calendar);

  export default {
    name: "statistics",
    components:{
      myHead
    },
    data() {
      return {
        show:false,
        date:'',
        start:"2020-07-01",
        end:"2020-07-02",
        minDate: new Date(2020, 6, 1),
      }
    },
    methods: {
      formatDate(date) {
        return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
      },
      back() {
        this.$router.back();
      },
      onConfirm(date){
        const [start, end] = date;
        this.show = false;
        this.start =this.formatDate(start);
        this.end =this.formatDate(end);
        this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
        // console.log(this.date);
      }
    },
    mounted() {

    },
    watch: {

    }
  }
</script>

<style scoped>
  .statistics{
    padding-top: .5rem;
    background-color: #F5F5F5;
  }
  .statistics .time{
    color: #999999;
    display: flex;
    justify-content: center;
    line-height: .38rem;
    font-size: .13rem;
    align-items: center;
  }
  .statistics .time>span{
    margin: 0 .05rem;
  }
  .statistics .time div{
    margin: 0 .08rem;
  }
  .statistics .time .search{
    padding: 0 .06rem;
    border: 1px solid #E2B500;
    line-height: .24rem;
    color: #E2B500;
  }
  .statistics .income{
    background-color: #ffffff;
    display: flex;
    height: 1.12rem;
    align-items: center;
    position: relative;
    margin-bottom: .1rem;
  }
  .statistics .income::after{
    content: "";
    display: inline-block;
    width: 1px;
    height: 1.12rem;
    top: 0;
    right: 50%;
    position: absolute;
    background-color: #F5F5F5;
  }
  .statistics .income>div{
    width: 50%;
    text-align: center;
  }

  .statistics .income .money{
    color: #F0C208;
    font-size: .22rem;
  }
  .statistics .income .desc{
    font-size: .14rem;
    color: #666666;
  }
</style>
